<template>
    <!-- <json-editor-vue class="editor" v-model="data" language="zh-CN" /> -->
    <div>
        <div class="body">
            <div class="title">
                <div class="avatar">
                    <el-avatar :src="avatarSrc"></el-avatar>
                    <div style="text-align: center;color: #19191a;font-size: 14px;">{{ userName }}</div>
                </div>
                <div class="info">
                    <div class="name">
                        <span style="margin-right: 15px;color: rgb(0, 0, 0);">{{ form.processName }}</span>
                        <span>
                            <el-tag :type="form.billFlowStatus">{{ form.billFlowStatusName }}</el-tag>
                        </span>
                    </div>
                    <div class="code">
                        <span>编号：</span>
                        <span>{{ form.flowId }}</span>
                    </div>
                </div>
            </div>
            <div class="form">
                <el-skeleton v-if="!showForm" :rows="8" />
                <div class="formData"></div>
            </div>
            <el-card>
                <tsTimeLine v-if="form.processInstanceId" :processInstanceId="form.processInstanceId" :flow-id="form.flowId"
                    :taskId="taskId" :businessKey="form.billId" ref="flowNodeFormatRef"></tsTimeLine>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, createVNode, render, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { SuccessFilled, ChatLineRound } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus';
import tsTimeLine from '@/components/tsTimeLine/index.vue'
import Api from '@/api/model/workflow.js'
import tool from '@/utils/tool.js'
const route = useRoute()
const emit = defineEmits(['updatetable'])
const instance = getCurrentInstance()
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
const avatarSrc = ref()
const userName = ref()
const taskId = ref('')
const showForm = ref(false)
const form = ref({})
onMounted(() => {
    getData()
})
const getData = async () => {
    console.log(props.paramsData)
    let param;
    if (JSON.stringify(route.query) !== '{}') {
        param = route.query
        taskId.value = route.query.id
    }
    else {
        param = props.paramsData
        taskId.value = props.paramsData.id
    }
    let res = await Api.task.detail.post(param)
    if (res.code == 200) {
        form.value = res.data
        let userInfo = tool.data.get("USER_INFO")
        avatarSrc.value = userInfo.fileFullPath
        userName.value = userInfo.number
        open()
    }
}
const open = () => {
    let paramsData = {
        id: form.value.billId
    }
    let noButton = true
    const box = document.querySelector(".formData")
    import(`@/views${form.value.reviewPageUrl}`).then((res) => {
        const form = createVNode(res.default, {
            paramsData,
            noButton
        })
        form.appContext = instance.appContext
        render(form, box)
        showForm.value = true
    })
}
</script>
<style scoped>
.body {
    background: #eeeeee;
    position: relative;
    height: 100%;
}

.title {
    background: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    padding: 0 10px 10px;
}

.a-avatar {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column !important;
}

.info {
    height: 50px;
    display: flex;
    padding: 0 10px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}

.name {
    font-size: 15px;
    color: #5e5e5e;
}

.code {
    font-size: 13px;
    color: rgb(108, 108, 108);
}

.form {
    margin: 15px 0;
    background: white;
    overflow: auto;
    max-height: 380px;
}

.footer {
    height: 60px;
    padding: 15px 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: white;
    border-top: 1px solid #dcdfe6;
    box-shadow: 0 0 15px #dad8d8;
}

.left {
    position: absolute;
    left: 20px;
    top: -5px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
}

.right {
    position: absolute;
    right: 20px;
}
</style>
